vendors = official

// хотелось назвать progress, но это имя уже занято
.spinner
    line-height 0
    whitespace nowrap
    visibility hidden
    text-align center
    display inline-block

    &_active
        visibility visible

    &__dot
        background-color #fff
        border-radius 100%
        display inline-block
        vertical-align middle
        animation bouncedelay 1.4s infinite ease-in-out
        /* Prevent first frame from flickering when animation starts */
        animation-fill-mode both

    &_small &__dot
        width 12px
        height 12px
        margin 0 1px

    &_medium &__dot
        width 18px
        height 18px
        margin 0 2px

    &_large &__dot
        width 24px
        height 24px
        margin 0 3px

    &__dot_1
        animation-delay -0.32s

    &__dot_2
        animation-delay -0.16s

@keyframes bouncedelay
    0%, 80%, 100%
        transform scale(0.0)
    40%
        transform scale(1.0)
